<template>
  <div class="v2t-settings">
    <div class="v2t-settings-header">
      <h2>设置</h2>
      <button 
        @click="resetSettings" 
        class="v2t-button v2t-button-warning"
      >
        重置
      </button>
    </div>

    <div class="v2t-settings-section">
      <h3>音频设置</h3>
      <div class="v2t-settings-item">
        <label>音频质量</label>
        <select v-model="settings.audio.quality">
          <option value="low">低质量</option>
          <option value="medium">中等质量</option>
          <option value="high">高质量</option>
        </select>
      </div>
      <div class="v2t-settings-item">
        <label>自动开始转换</label>
        <input 
          type="checkbox" 
          v-model="settings.audio.autoStart"
        >
      </div>
      <div class="v2t-settings-item">
        <label>最大时长(分钟)</label>
        <input 
          type="number" 
          v-model.number="settings.audio.maxDuration"
          min="1"
          max="120"
        >
      </div>
    </div>

    <div class="v2t-settings-section">
      <h3>转换设置</h3>
      <div class="v2t-settings-item">
        <label>目标语言</label>
        <select v-model="settings.conversion.language">
          <option value="zh">中文</option>
          <option value="en">英文</option>
          <option value="ja">日文</option>
        </select>
      </div>
      <div class="v2t-settings-item">
        <label>自动保存历史</label>
        <input 
          type="checkbox" 
          v-model="settings.conversion.autoSave"
        >
      </div>
    </div>

    <div class="v2t-settings-section">
      <h3>界面设置</h3>
      <div class="v2t-settings-item">
        <label>主题</label>
        <select v-model="settings.ui.theme">
          <option value="light">浅色</option>
          <option value="dark">深色</option>
        </select>
      </div>
      <div class="v2t-settings-item">
        <label>字体大小</label>
        <input 
          type="number" 
          v-model.number="settings.ui.fontSize"
          min="12"
          max="20"
        >
      </div>
      <div class="v2t-settings-item">
        <label>紧凑模式</label>
        <input 
          type="checkbox" 
          v-model="settings.ui.compactMode"
        >
      </div>
    </div>

    <div class="v2t-settings-footer">
      <button 
        @click="saveSettings" 
        class="v2t-button"
      >
        保存设置
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { SettingsService } from '../services/settings.service';

export default defineComponent({
  name: 'V2tSettings',

  setup() {
    const settings = ref(SettingsService.defaultSettings);

    const loadSettings = async () => {
      settings.value = await SettingsService.getSettings();
    };

    const saveSettings = async () => {
      try {
        await SettingsService.updateSettings(settings.value);
        alert('设置已保存');
      } catch (error) {
        alert('保存设置失败');
      }
    };

    const resetSettings = async () => {
      if (confirm('确定要重置所有设置吗？')) {
        settings.value = await SettingsService.resetSettings();
        alert('设置已重置');
      }
    };

    onMounted(loadSettings);

    return {
      settings,
      saveSettings,
      resetSettings
    };
  }
});
</script>

<style scoped>
.v2t-settings {
  padding: 16px;
}

.v2t-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.v2t-settings-section {
  margin-bottom: 24px;
}

.v2t-settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.v2t-settings-item label {
  flex: 1;
}

.v2t-settings-item select,
.v2t-settings-item input[type="number"] {
  width: 120px;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.v2t-button-warning {
  background: #ffc107;
}

.v2t-settings-footer {
  margin-top: 24px;
  text-align: right;
}
</style> 